<template>
    <view class="pagebox">
        <uni-card>
            <uni-forms>
                <uni-forms-item label="备注" required="">
                    <uni-easyinput type="text" v-model="title" placeholder="请输入备注" />
                </uni-forms-item>
       
                <uni-forms-item required label="上传">
                    <view class="imglist">
                        <view class="imgone" v-for="(val,index) in lists" :key="index" @click="del(index)">
                            <image class="thumb" :src="val.uri" mode="widthFix"></image>
                            <uni-icons class="close" type="clear" size="12" color="#e43d33"></uni-icons>   
                        </view>    
                        <view class="imgone" v-if="lists.length<3" @click="selfile">
                            <uni-icons type="plusempty" size="20"></uni-icons>
                            <view>{{lists.length}}/3</view> 
                            
                        </view>
                    </view>
                </uni-forms-item>
            </uni-forms>
            <button class="bbb" type="primary" size="mini" @click="submitForm">提交保存</button>
        </uni-card>
    </view>
</template>

<script>
    export default{
        name:"transfer",
        data(){
            return{
                oid:'',
                title:"",
                lists:[],
                hasing:false,
                progress:0
            }
        },
        onLoad(option){
            this.oid = option.oid
            
        },
        methods:{
            selfile(){
                var _this = this
                var len = 3 - this.lists.length
                uni.chooseImage({
                    count:len,
                    success:function(res){
                  
                        var array = []
                        res.tempFilePaths.forEach(function(val,index){
                            array.push({
                                name:'file_'+index,
                                uri:val
                            })
                        })
                        _this.lists = _this.lists.concat(array)
                      
                    },
                    
                })
            },
            submitForm(){
                if(!this.title){
                    this.$error('请输入备注')
                    return
                }
                if(this.lists.length<=0){
                    this.$error('请上传图片')
                    return
                }
              
                var _this = this
                uni.showLoading({
                    title:'上传中...',
                    mask:true
                })
                var uploadTask = uni.uploadFile({
                    url:_this.$api.postURL+'produce/uploadimg',
                    files:_this.lists,
                    fileType:"image",
                    name:"file",
                    header:{
                        Authorization:uni.getStorageSync('nangtong_login_token')
                    },
                    formData:{
                        oid:this.oid,
                        title:this.title
                    },
                    success: (uploadFileRes) => {
                        var data = JSON.parse(uploadFileRes.data);
                        
                        if(data.code == 0){
                            _this.$error(data.message)
                        }else{
                           this.$success("上传成功") 
                           setTimeout(function(){
                               uni.navigateBack({data:1})
                           },500)
                        }
                    },
                    complete:function(){
                     
                        uni.hideLoading()
                    }
                })
            },
            showimg(index){
                uni.previewImage({
                    urls:this.lists,
                    current:index
                })
            },
            del(index){
                this.lists.splice(index,1)
            }
        }
    }
</script>

<style lang="less" scoped>
    .bbb{
        display: block;
        margin: 0 auto;
    }
    .imglist{
        display: flex;
        align-items: center;
        .imgone{
            width: 100rpx;
            height: 100rpx;
            border-radius: 5rpx;
            overflow: hidden;
            text-align: center;
            border: 1px solid #c7c9ce;
            margin-right: 20rpx;
            position: relative;
            .close{
                position: absolute;
                top: -10rpx;
                right: 2rpx;
                z-index: 9;
            }
            .thumb{
                width: 100%;
                height: 100%;
            }
        }
    }
</style>